<template>
  <div class="sessions-view">
    <el-card shadow="hover" v-for="item in sessions" class="session-item" :body-style="bodyStyle"
      @click="handleSessionClick(item)">
      <SessionItem :session="item"></SessionItem>
    </el-card>
  </div>
</template>

<script setup>
import SessionItem from "@/components/session/SessionItem.vue";
import { reactive, ref, onMounted } from "vue"
import { getAllSessions } from "@/api/session"
import { useAuthStore } from "@/stores/auth"
import { useRoute, useRouter } from 'vue-router'
import { useSessionStore } from "@/stores/session"

// console.log(useRoute().query);
const router = useRouter()
const sessionStore = useSessionStore()

//修改card内部样式
const bodyStyle = reactive({
  'padding': '0.5rem',
})
const authStore = useAuthStore()

onMounted(() => {
  getSessions(authStore.user)
})
//会话列表
const sessions = ref([])
//获取所有会话
const getSessions = (userInfo) => {
  getAllSessions(userInfo).then(res => {
    sessions.value = res.data
  })
}
//跳转会话页面
const handleSessionClick = (session) => {
  //先模拟一下使用mid>=5来代表dao的模型
  if (session.mid >= 1) { //跳转到DAO页面
    router.push({
      path: `/session/listdao/${session.id}`,
      query: {
        mid: session.mid
      }
    })
  } else {
    router.push({
      path: `/session/${session.id}`,
      query: {
        mid: session.mid
      }
    })
  }

  sessionStore.setSession(session)
}

</script>

<style lang="scss" scoped>
.sessions-view {
  width: 50vw;

  .session-item {
    margin: 0.5rem 0 0.5rem 0;

    :hover {
      background-color: rgb(235.9, 245.3, 255);
    }
  }
}
</style>
